<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 这里不能 v-on:click="handleBtnClick_zhang,goshopping" 这样子写的，你在里面打个逗号是啥意思，js这里只能引用一个方法，不能放多个-->
        <button v-on:click="handleBtnClick_zhang">小张给小明一块钱</button>
        <button v-on:click="handleBtnClick_wang">小王给小明一块钱</button>
        <button v-on:click="handleBtnClick_san">小三给小明一块钱</button>
        <button v-on:click="makeMoney">随机给王麻子的随机重孙发随机（1-9）元钱</button>
    </div>

    <script>
        // 比如小明说，不管谁给我钱，我都要去花掉
        // 现在我们要对王麻子的孙进行监听，每个孙子的钱是3的倍数的时候，要上交给王麻子的老婆1块钱
        var vm = new Vue({
                el: '#app',
                data: {
                    a: 0,
                    b: 2,
                    wangmazi: { //王麻子有多个重孙，每个孙子的钱是3的倍数的时候，要上交给王麻子老婆1块钱,每点一次按钮的时候要给王麻子的孙随机1-9元的钱
                        son: {
                            children: [{
                                money: 1
                            }, {
                                money: 3
                            }, {
                                money: 6
                            }, {
                                money: 0
                            }]
                        },
                        wife: { //王麻子的老婆刚开始没钱
                            money: {
                                money: 0
                            }
                        }
                    }
                },
                watch: {
                    // 监控a变量变化的时候，自动执行此函数
                    a: function(val, oldVal) {
                        this.goshopping(val);
                        // console.log('在这里可以监听到a的值的变化')
                        // console.log('new: %s, old: %s', val, oldVal)
                    },
                    // 深度 watcherhaoxia
                    // 遇到这种情况，就只能深度监听了
                    //下面对王麻子的重孙进行监听,单独监听某个子属性的时候，可以以下面这种写法写
                    'wangmazi.son.children': {
                        handler: function(val, oldVal) { //这个是处理函数，当王麻子的重孙的钱变化时，就会执行这个函数
                            if (val && val.length > 0) {
                                let totalMoney = 0;
                                val.forEach(item => {
                                    //% 表示取余
                                    if (item.money % 3 === 0) {
                                        totalMoney += (item.money / 3);
                                    }
                                });
                                this.wangmazi.wife.money = totalMoney;
                            }
                            console.log(`王麻子的老婆现在有${this.wangmazi.wife.money}钱了`);
                        },
                        deep: true,
                        immediate: true, //立马执行一次,第一次数据无变化的时候，也执行一次处理函数
                    }
                },
                methods: {
                    //随机给王麻子的重孙发钱
                    makeMoney() {
                        //生成0-3之间的随机数，随机给王麻子的重孙发1-9之间的钱
                        let flag = this.randomNum(0, 3);
                        let money = this.randomNum(1, 9);
                        this.wangmazi.son.children[flag].money += money;
                        console.log(`给王麻子第${flag+1}个重孙，发了${money}元钱，他原来有${this.wangmazi.son.children[flag].money-money},现在他共有${this.wangmazi.son.children[flag].money}元钱！`);
                    },
                    //生成从minNum到maxNum的随机数
                    randomNum: function(minNum, maxNum) {
                        switch (arguments.length) {
                            case 1:
                                return parseInt(Math.random() * minNum + 1, 10);
                                break;
                            case 2:
                                return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                                break;
                            default:
                                return 0;
                                break;
                        }
                    },
                    handleBtnClick_zhang: function(e) {
                        this.a += 1;
                    },
                    handleBtnClick_wang: function(e) {
                        this.a += 1;
                    },
                    handleBtnClick_san: function(e) {
                        this.a += 1;
                    },
                    goshopping: function(money) {
                        //不用关心谁给我的钱，只有自己的钱变化了，我就去购物
                        console.log('我去买东西了,买了：' + money + '元的')
                    }

                }

            })
            // vm.a = 2 // -> new: 2, old: 1
            //注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。
    </script>

</body>

</html>